From: Sam Hewitt <snwh@gnome.org>
Date: Wed, 10 Dec 2025 14:46:37 +0000 (-0330)
Subject: css: Define a higher contrast insensitive text style for card elements
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~55^2^2~8
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=0df23d594048234015a565cca097f29e24d8e277;p=gnome-shell.git

css: Define a higher contrast insensitive text style for card elements

- fixes an oversight in color definitions for insensitive style text on cards where contrast was insufficient

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/8683
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3998>
(cherry picked from commit 9dfa625d10c11c287b090ee5a6f39b4678a4c408)
---

diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index 0412e4f42..3a7d49c7c 100644
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -68,3 +68,10 @@ $active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_colo
 
 // accent colors
 $accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 20%), st-lighten(-st-accent-color, 30%));
+
+//
+// Special Case Colors
+//
+
+// increase contrast on insensitive_fg_color since card elements have a lighter background
+$card_insensitive_fg_color: if($variant =='light', darken($insensitive_fg_color, 5%), lighten($insensitive_fg_color, 9%));
\ No newline at end of file
diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index ac622cbde..40c9074ac 100644
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -67,6 +67,12 @@ $active_fg_color: lighten($fg_color, 22%);
 // accent colors
 $accent_borders_color: st-lighten(-st-accent-color, 30%);
 
+//
+// Special Case Colors
+//
+
+$card_insensitive_fg_color: $fg_color;
+
 //
 // High Contrast specific definitions
 //
diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index a4c6a8870..bb9852f5e 100644
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -164,7 +164,7 @@
     // event title
     .events-title {
       @extend %heading;
-      color: $insensitive_fg_color;
+      color: $card_insensitive_fg_color;
       padding-bottom: $base_padding;
     }
 
@@ -184,12 +184,12 @@
         .event-time {
           @extend %numeric;
           @extend %caption;
-          color: $insensitive_fg_color;
+          color: $card_insensitive_fg_color;
         }
       }
 
       .event-placeholder {
-        color: $insensitive_fg_color;
+        color: $card_insensitive_fg_color;
         font-style: italic;
       }
     }
@@ -202,7 +202,7 @@
   // title
   .world-clocks-header {
     @extend %heading;
-    color: $insensitive_fg_color;
+    color: $card_insensitive_fg_color;
 
     // change style when no world clocks are configured
     &.no-world-clocks {
@@ -232,7 +232,7 @@
     .world-clocks-timezone {
       @extend %numeric;
       @extend %caption;
-      color: $insensitive_fg_color;
+      color: $card_insensitive_fg_color;
     }
   }
 }
@@ -249,7 +249,7 @@
 
       .weather-header {
         @extend %heading;
-        color: $insensitive_fg_color;
+        color: $card_insensitive_fg_color;
 
          // change style when no location is configured
         &.no-location {
diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index 5e8812f7c..6be1400b4 100644
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -99,7 +99,7 @@
   // message header
   .message-header {
     spacing: $base_padding;
-    color: $insensitive_fg_color;
+    color: $card_insensitive_fg_color;
     padding:0 $base_padding;
 
     // remove side padding to accommodate the close button
@@ -126,7 +126,7 @@
       // Time label
       .event-time {
         @extend %caption;
-        color: $insensitive_fg_color;
+        color: $card_insensitive_fg_color;
         // Add bottom padding to align the app name with the time horizontally
         padding-bottom: to_em(1px);